<template>
    <div class="flex flex-wrap">
        <sidebar />
        <div class="p-8">
            <ai-writer-nav title="小红书" subtitle="写笔记"
                image="https://st0.dancf.com/market-operations/market/side/1689667454937.png"></ai-writer-nav>

            <div class=" my-4 flex justify-between text-sm">
                <div><span class="text-red-500">*</span>内容需求</div>
                <el-popover trigger="hover" width="300px">
                    <template #reference>
                        <div class="cursor-pointer">试试范文</div>
                    </template>
                    <div class="rounded-lg bg-white">
                        <div class="p-2 cursor-pointer hover:bg-gray-100" v-for="(item, index) in tips" :key="index"
                            @click="input = item.desc">
                            {{
                            item.title }}</div>
                    </div>
                </el-popover>
            </div>
            <el-input v-model="input" placeholder="请输入创意描述" :rows="7" type="textarea"></el-input>
            
            <el-button class="my-4 w-full" type="primary" @click="confirm">立即生成</el-button>

        </div>

        <div id="outputbox"  v-if="output" class=" bg-gray-100 p-16 flex-1 ">
                <div v-html="output"></div>
                <div class="text-sm text-gray-500">字数：{{ wordNum }}</div>
        </div>
        <ai-writer-rightbar v-else></ai-writer-rightbar>
    </div>
</template>
<script setup>
useSeoMeta({
    title: '小红书笔记写作，让文案创作变得轻松',
    ogTitle: '小红书笔记写作，让文案创作变得轻松',
    description: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogDescription: '明志智图AI绘图工具是一款智能化的绘图工具，提供了各种功能和工具，帮助您快速创作出各种高质量的图形和图像。无论是进行创意设计、创意制作，还是对图片进行处理和优化，明志智图AI都提供了最佳的解决方案。',
    ogImage: 'https://cdn.mzyun.tech/logo_black.png',
    keywords:"AI创作,AI写作,AI创作工具,AI文案,明志科技,明志"
})
import { marked } from 'marked'
const input = ref('')
const output = ref('')
const tips = ref([{
    title: '伦敦旅游笔记',
    desc: '我想要一篇关于去伦敦度假旅行的攻略笔记，要包含英国特色小吃炸鱼薯条以及伦敦塔，白金汉宮等著名景点的介绍，再附上当地旅游小贴士。'
}, {
    title: '探店笔记',
    desc: '请写一篇关于日式咖啡馆的笔记。该咖啡馆是上班族周末放松的好去处，由米其林大师精心制作的蛋糕甜品非常好吃，其中提拉米苏融合中式元素，做工精美，是少女们的打卡必备。'
}, {
    title: '奶爸带娃笔记',
    desc: '写一篇关于奶爸带娃的笔记，主要讲述带娃很费心，大人需要24小时照顾，没有娱乐时间。文中需植入婴儿床产品的种草，主要卖点为真皮选材，人体工学设计，对宝宝情绪有很好安抚作用。'
}, {
    title: '梨型穿搭笔记',
    desc: '帮我写一篇主题为"梨型身材女生如何穿出职场高级感?"的笔记。要点分别为：卡其色裤子--面料质感好；条纹针织外套--大小百搭；黑色喇叭裤--修身显腿长。'
}])

const wordNum = ref(0)
const store = useUserStore();
const showLogin=inject("showLogin")
const confirm = () => {
    if(!store.isLogin){
        showLogin.value=true
        return false;
    }
    if (!input.value) {
        ElMessage.error('创意描述不能为空')
        return false;
    }
    const message = ref('')
    message.value = input.value + '，字数要求200字' 

    useEventSource("/api/bailian/chat", { message: message.value }, function (data) {
        output.value = marked.parse(data.output.text)
        wordNum.value = data.output.text.length
    })


}


</script>